<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局站点监测</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link href="../static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/public.css">
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <!-- jquery 提示插件css -->
    <link href="../static/plugins/bootstrap-tree/bootstrap-treeview.css" rel="stylesheet">

    <link href="../static/plugins/toastr.min.css" rel="stylesheet">
    <!--日期-->
    <link rel="stylesheet" href="../static/plugins/jedate/jedate.css">
</head>
<body style="background-color:#eee">
<div id="box" style="margin-top: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all" style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>站点监测区域</span>
            </div>
            <div class="content-center">
                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                <div id="treeview7" class="test"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;overflow: auto;">
            <div class="content-title border-bottom" style="position:relative;">
                <span>{{treeTitle.name}}</span>
            </div>
            <div class="ibox-content" style="position:relative;">
                <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 15px;left: 220px;">查询
                </button>
                <table id="table"
                       data-toggle="table"
                       data-toolbar=".toolbar"
                       data-pagination="true"
                       data-maintain-selected="true"
                       data-search="true"
                       data-show-refresh="true"
                       data-search-align="left"
                       data-toolbar-align="right">
                    <thead>
                    <tr>
                        <th data-align="center" data-width="40"></th>
                        <th data-align="center" data-field="facility_name">名称</th>
                        <th data-align="center" data-field="facility_location">出口流量</th>
                        <th data-align="center" data-field="facility_device_amount">入口流量</th>
                        <th data-align="center" data-field="check_device">出口压力</th>
                        <th data-align="center" data-field="uncheck_device">入口压力</th>
                        <th data-align="center" data-field="mistake">能耗</th>
                        <th data-align="center" data-field="facility_user">报警</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script src="../static/js/vue.min.js"></script>
<!--bootstrap-ree-->
<script src="../static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<!--深拷贝-->
<script src="../static/js/publicServe.js"></script>
<script src="../static/plugins/toastr/toastr.min.js"></script>
<!--日期-->
<script src="../static/plugins/jedate/jedate.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            leftTreeLoading: true,               //左侧树结构加载判断
            leftTreeList: [],                        //左侧树
            treeTitle: {
                id: null,
                name: '设备巡检记录'
            },                  //模态框title的类型 添加|编辑
            tableList: [],               //table信息
            modalType: '添加',                //弹框  添加||删除
            modalData: {
                device_id: null, // 设备id
                result: true, // 巡检结果 0-正常 1-异常
                remark: "", // 巡检备注
                patrol_user_id: null, // 巡检用户id
                patrol_manage_id: null // 巡检项id
            },
        },
        created: function () {

        }
    });

    //获取左侧树
    function getTreeList() {
        vm.leftTreeLoading = true;
        $.ajax({
            url: 'http://172.16.200.252:8080/core/district/get_tree_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.leftTreeLoading = false;
                    vm.leftTreeList = response.data;
                    //绘制zTree树
                    renderZTree(vm.leftTreeList);
                    //获取数据中第一条 的下级 table list结构
                    if (vm.leftTreeList[0]) {
                        vm.treeTitle.name = vm.leftTreeList[0].name;
                        vm.treeTitle.id = vm.leftTreeList[0].id;
                        getTableList(vm.leftTreeList[0].id);
                    }
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //绘制左侧树
    function renderZTree(tableList) {
        $('#treeview7').treeview({
            color: "#666",
            showBorder: false,
            data: tableList,
            onNodeSelected: function (event, data) {
                vm.treeTitle = {
                    id: data.id,
                    name: data.name
                };
                getTableList(data.id)
            }
        });
    }

    // 数据列表
    var $table = $('#table');
    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r, row, element) {
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.modalData = row;
    });
    $table.bootstrapTable({
        columns:                 //列表序号
            [{
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }],
    });

    //获取table数据
    function getTableList(id) {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/patrol_recorder/get_by_district/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id: id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.tableList = response.data;
                    for (var i = 0; i < vm.tableList.length; i++) {
                        vm.tableList[i].is_complete = vm.tableList[i].is_complete == 0 ? true : false;
                    }
                    //绘表格数据
                    $table.bootstrapTable('load', vm.tableList);
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //获取zTree信息
        getTreeList();
        //获取table信息 并且绘制
        $table.bootstrapTable('load', vm.tableList);
    });

    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>